<template>
  <div class="reportList">
    <p class="titles">
      报告列表
    </p>

    <!-- <el-col :span="24"
            style="background:#ffffff;"> -->
    <ul class="process-wrap"
        v-if="data.length!=0">
      <li class="process-content"
          v-for="(item,index) in data"
          :key="index">
        <p class="process-type">{{item.component_name}}</p>
        <div class="process-line"></div>
        <div class="process-step"
             v-for="(test,key) in item.reportData">
          <p class="process-text">{{test.check_name}}</p>
          <p class="process-standard">{{test.result== '0' ? "未检测":(test.result=='1'?"合&nbsp;&nbsp;&nbsp;&nbsp;格":"不合格")}}</p>
          <p class="process-time">{{test.updated_at}}</p>
          <p class="process-check"
             @click="handleDetails(test.check_id,0)">查看详情</p>
          <p class="el-icon-d-arrow-right"
             style="cursor: pointer;transform:rotate(-90deg);margin-top:14px;font-size:16px;font-weight:bold"
             v-show="(test.result=='1' || test.result=='2') &&test.show==true"
             @click="closeList(index,key)"></p>
          <!-- v-show="(test.result==1 || test.result==2) &&test.show==true " -->
          <!--class="el-icon-adm-shuangjiantouxia"  v-show="(test.result==1 || test.result==2) && test.show==false" -->
          <!-- <p style="cursor: pointer;margin-top:10px;"
             @click="showList(index,key)">展开</p> -->
          <p class="el-icon-d-arrow-right"
             style="cursor: pointer;transform:rotate(90deg);margin-top:14px;font-size:16px;font-weight:bold"
             v-show="(test.result=='1' || test.result=='2') &&test.show==false"
             @click="showList(index,key)"></p>
          <img src="static/img/edit_wps.png"
               v-show="btnType=='1'?false:true"
               style="margin-top:10px;cursor: pointer;width:25px;height:25px;float:left"
               @click="handleEdit(test.listData,test.result,test.check_id)">

          <!-- <el-button type="info"
                       size="small"
                       style="float:left;"
                       @click="handleEdit(test.listData,test.result,test.check_id)">修改信息</el-button> -->
          <div class="process-details"
               v-show="test.show">
            <img v-for="(list,i) in JSON.parse(test.report_detail)"
                 v-if="list.control_type=='image' &&list.value!='' "
                 :src="list.value"
                 class="process-img"
                 @click="zoomImg(list.value)">
            <img v-for="(list,i) in test.listData "
                 src="/static/img/none.png"
                 class="process-img"
                 v-if="list.value==''">
            <div class="process-info">
              <div v-for="(list,i) in JSON.parse(test.report_detail)"
                   v-if="list.control_type=='scanuser'"
                   class="clearfix box-div">
                <div class="float-left">
                  <p style="line-height:44px;display: inline-block;min-width:120px;text-align:right;">{{list.name}}：</p>
                </div>
                <div class="float-right"
                     v-for="(text,index) in ((list.value).split(','))"
                     style="min-width:400px">
                  <div class="float-left">
                    <p style="line-height:44px;display: inline-block;min-width:60px"> {{text.split('::')[0]}}</p>
                    <p style="line-height:44px;">工种：</p>
                    <p style="line-height:44px;display: inline-block;min-width:120px">{{text.split('::')[1]}}</p>
                    <p style="line-height:44px;">手机号：</p>
                    <p style="line-height:44px;display: inline-block;width:91px">{{text.split('::')[2]!=null?(text.split('::')[2].replace(text.split('::')[2].substring(3,7), "****")):''}}</p>
                  </div>
                </div>
              </div>
              <div v-for="(list,i) in JSON.parse(test.report_detail)"
                   v-if="list.control_type=='supervision'"
                   class="clearfix">
                <div class="float-left">
                  <p style="line-height:44px;display: inline-block;min-width:120px;text-align:right;">{{list.name}}：</p>
                </div>
                <div class="float-right">
                  <p style="line-height:44px;display: inline-block;min-width:60px">{{(list.value.split(',')[1])}}</p>
                  <p style="line-height:44px;">工种：</p>
                  <p style="line-height:44px;display: inline-block;min-width:120px">{{(list.value.split(',')[0])}}</p>
                  <p style="line-height:44px;">手机号：</p>
                  <p style="line-height:44px;display: inline-block;width:91px">{{list.value.split(',')[2]!=null?(list.value.split(',')[2].replace(list.value.split(',')[2].substring(3,7), "****")):''}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <ul class="process-wrap"
        v-else>
      <li class="process-content"
          style="width:100%;height:400px;text-align: center;line-height: 400px;color:#999999;font-size:14px">
        暂无报告数据
      </li>
    </ul>
    <!-- </el-col> -->

    <el-dialog :visible.sync="openImg"
               width="40%">
      <img :src="img"
           style="width:100%;height:400px;" />
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import { componentListApi } from '@/services/ProjectCenter'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  data () {
    return {
      data: [],
      listData: [],
      openImg: false,
      img: '',
      component_id: '',
      uid: '',
      project_id: '',
      btnType: "",
    }
  },
  methods: {
    showList (i, j) {
      this.data[i].reportData[j].show = true;
      // // sessionStorage.setItem("showList",this.data[i].list[j].show=true);
      // // sessionStorage.setItem("i",i);
      // // sessionStorage.setItem("j",j);
    },
    closeList (i, j) {
      this.data[i].reportData[j].show = false;
    },
    //获取工序状态
    getMemberStatus () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'component_type'
        }
      }).then(res => {
        this.memberType = res.data.list
      })
    },
    //获取页面初始化数据
    getData () {
      componentListApi.getReportInfo({
        params: {
          component_id: this.$route.query.id,
        }
      }).then((res) => {
        console.log('cp_data', res)
        let arr = res.data;
        arr.forEach(menu => {
          menu.reportData.forEach(list => {
            list.show = false;
          })
        })
        this.data = arr;
        for (var i = 0; i < this.data.length; i++) {
          for (var j = 0; j < this.memberType.length; j++) {
            if (this.data[i].stepData === this.memberType[j].value) {
              this.data[i].component_name = this.memberType[j].name
            }
          }
        }
        // for (var i = 0; i < this.data.length; i++) {
        //   for (var j = 0; j < this.data[i].list.length; j++) {
        //     this.getListData(i, j, (this.data[i].list[j].check_id));
        //   }
        // }
      }).catch((error) => {
        console.log(error)
      })
    },
    //获取列表检查项数据
    getListData (i, j, id) {
      // componentListApi.getCheckItems({
      //   params: {
      //     component_id: this.$route.query.component_ids,
      //     check_id: id,
      //     param_type: 'ztxx',
      //     uuid: this.$route.query.uuid
      //   }
      // }).then((res) => {
      //   this.data[i].list[j].listData = res.data.items;
      // }).catch((error) => {
      //   console.log(error)
      // })
    },
    zoomImg (data) {
      this.openImg = true;
      this.img = data;
    },
    handleEdit (data, reslut, id) {
      this.$router.push({ path: 'editReport' })
    },
    //跳转查看详情页
    handleDetails (id, result) {
      this.$router.push({ path: 'modifyInfo', query: { check_id: id, component_id: this.component_id, isShow: result } })
    }
  },
  created () {
    this.getMemberStatus()
    this.getData();
    this.btnType = this.$route.query.type
  }
}
</script>
<style lang="scss" scoped>
.box-div {
  overflow: hidden;
}
.process-time {
  margin-top: 10px;
}
/deep/ .el-icon-adm-shuangjiantouxia:before {
  content: "\E630" !important;
}
.titles {
  margin-bottom: 40px;
  font-size: 16px;
}
.reportList {
  padding: 20px;
  .process-wrap {
    /* overflow: hidden; */
    .process-content {
      position: relative;
      min-height: 30px;
      margin-top: 10px;
      .process-line {
        background-color: #e6e6e6;
        // background: #000;
        position: absolute;
        height: 100%;
        width: 2px;
        top: 0px;
        margin-left: 9px;
        /* transform: rotate(90deg); */
        transform-origin: left;
        z-index: 1;
      }
      .process-type {
        padding-left: 40px;
        height: 30px;
        position: relative;
        z-index: 2;
        background: url("/static/img/zhuangtai.png") no-repeat 0 0;
      }
      .process-step {
        font-size: 14px;
        min-height: 35px;
        padding-left: 40px;
        width: 820px;
        margin-bottom: 15px;
        overflow: hidden;
        position: relative;
        z-index: 2;
        background: url("/static/img/wancheng.png") no-repeat 2px 13px;
        p {
          float: left;
          margin-right: 40px;
        }
        .process-text {
          min-width: 200px;
          margin-top: 10px;
        }
        .process-standard {
          min-width: 60px;
          margin-top: 10px;
        }
        .process-check {
          cursor: pointer;
          margin-top: 10px;
        }
        .process-show {
          cursor: pointer;
        }
        .process-details {
          margin-top: 40px;
          min-height: 200px;
          .process-img {
            width: 200px;
            height: 150px;
            position: absolute;
            left: 35px;
            top: 60px;
          }
          .process-info {
            /* position:absolute;
                                left:240px;
                                top:70px; */
            float: left;
            padding-bottom: 40px;
            margin-left: 220px;
            p {
              margin-right: 10px;
            }
            .process-word {
              margin-bottom: 10px;
              min-height: 30px;
            }
          }
        }
      }
    }
  }
}
</style>
